<template>
	<view class="header">
		<!-- 	<u-navbar bg-color="transparent" leftIconColor="#fff" title="订单详情" :titleStyle="{
			color:'#fff'
		}" placeholder="true" :autoBack="true"></u-navbar> -->

		<u-navbar bg-color="#fff" leftIconColor="#000" title="派送中" :titleStyle="{
			color:'#000'
		}" placeholder="true" :autoBack="true"></u-navbar>
		<statusPay v-if="status==0"></statusPay>
		<statusDelivery v-if="status==2"></statusDelivery>
	</view>
	<view class="goods-info">
		<view class="goods w94 mt10">
			<view class="time">2024-10-10 14:08:23</view>
			<view class="order_goods">

				<view class="body flex-between">
					<view class="left flex">
						<view class="img-box">
							<u-image width="72" height="72" radius="8" src="@/static/images/jiayouzhan.png"></u-image>
						</view>
						<view class="description">
							<view class="one">
								重庆市渝中区加油站
							</view>
							<view class="two">
								#92
							</view>
							<view class="three">
								<view>
									云油合作站
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="amount flex-center">
							<view class="symbol">
								￥
							</view>
							<view>3000</view>
							<view class="decimal">.00</view>

						</view>
						<view class="num">约30升</view>
					</view>
				</view>
			</view>
			<up-divider></up-divider>
			<view class=" kefu flex-center">
				<u-icon name="kefu-ermai"></u-icon>
				<text>联系客服</text>
			</view>
		</view>

		<view class="cell-box">
			<view class="cell flex-between">
				<text>商品总价</text>
				<text>￥3500.00</text>
			</view>

			<view class="cell flex-between cellTop">
				<text>实付款</text>
				<text>￥3500.00</text>
			</view>
		</view>

		<view class="cell-box">
			<view class="cell flex-between">
				<text>订单编号</text>
				<view class="flex">wx575708560936140800
					<view class="copy">复制</view>
				</view>
			</view>

			<view class="cell flex-between cellTop">
				<text>下单时间</text>
				<text>2024-10-10 15:40:17</text>
			</view>
			<view class="cell flex-between cellTop">
				<text>支付状态</text>
				<text>未支付</text>
			</view>
			<view class="cell flex-between cellTop">
				<text>支付方式</text>
				<text>微信</text>
			</view>
		</view>
	</view>
	<view class="pb-safe"></view>
	<view class="footer">
		<view class="btn-box">
			<view class="btn flex-center" @click="$u.throttle(goPayment, 500)">申请开票</view>
			<!-- <view class="btn flex-center primary">立即支付</view> -->

			<!-- <view class="btn flex-center">取消订单</view> -->
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import statusDelivery from './components/statusDelivery.vue';
	import statusPay from './components/statusPay.vue';
	const status = ref(2)
	const goPayment = ()=>{
		uni.navigateTo({
			url:'/pages/goods/payment/index'
		})
	}
</script>

<style lang="scss">
	.header {
		z-index: 99;
		width: 100%;
		position: relative;


	}

	.goods-info {
		padding: 0 20rpx;
		margin-top: 20rpx;

		.goods {
			padding: 34rpx 24rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.time {
				margin-bottom: 26rpx;
				font-size: 28rpx;
			}

			.order_goods {

				.body {
					margin-top: 26rpx;

					.left {
						.img-box {
							width: 72px;
							height: 72px;
							border-radius: 8px;
						}

						.description {
							margin-left: 20rpx;

							.one {
								width: 346rpx;
								color: #333;
								line-height: 40rpx;
								font-size: 14px;
								word-break: break-all;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;

							}

							.two {
								margin-top: 12rpx;
								width: 346rpx;
								color: #999;
								line-height: 36rpx;
								font-size: 12px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.three {
								margin-top: 12rpx;
								display: flex;
								flex-wrap: wrap;

								view {
									background: rgb(255, 255, 255);
									color: $u-primary;
									border: 1px solid $u-primary;
									display: flex;
									justify-content: center;
									align-items: center;
									height: 16px;
									font-size: 9px;
									padding: 0 4px;
									border-radius: 2px;
									margin-right: 4px;
									box-sizing: border-box;
									margin-bottom: 4px;

								}

							}
						}
					}

					.right {
						.amount {
							color: #e93323;
							font-family: SemiBold;
							font-weight: 500;
							font-family: "阿里妈妈灵动体 VF Thin";
							font-weight: 600;

							.symbol {
								font-size: 10px;
							}

							.decimal {
								font-size: 10px;
							}
						}

						.num {
							color: #999;
							text-align: right;
							line-height: 18px;
							font-size: 24rpx;
							font-family: "PingFang SC";
						}
					}
				}
			}

			.kefu {
				font-size: 14px;
				padding-left: 8px;
				margin-top: 20rpx;

				text {
					margin-left: 15rpx;
				}
			}
		}
	}

	.cell-box {
		padding: 17px 12px;
		border-radius: 8px;
		margin-top: 10px;
		background-color: #fff;

		.cell {
			font-size: 14px;

			.copy {
				width: 36px;
				height: 19px;
				background: #f5f5f5;
				border-radius: 10px;
				text-align: center;
				line-height: 19px;
				font-size: 11px;
				margin-left: 6px;
			}
		}

		.cellTop {
			margin-top: 21px;
		}
	}

	.pb-safe {
		height: 200rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 999;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid #eee;

		.btn-box {
			padding: 0 10px;
			justify-content: flex-end;
			height: 51px;
			display: flex;
			align-items: center;

			.btn {
				border: 1px solid #ccc;
				width: 76px;
				height: 29px;
				font-size: 12px;
				border-radius: 16px;
				background-color: #fff;
				margin-right: 20rpx;
			}

			.primary {
				color: #fff;
				background-color: #FF4110;
				border: 1px solid #FF4110;
			}
		}
	}
</style>